<html>
  <head>
    <title>Text Fonts (MSDF vs. SDF)</title>
    <meta name="description" content="Text Fonts (MSDF vs. SDF) - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #3CF">
      <a-assets>
        <a-mixin id="text"
          text="align: center; width: 6;
                value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam"
        ></a-mixin>
        <a-mixin id="msdf-text"
          text="align: center; width: 6;
                font: https://rawgit.com/Jam3/three-bmfont-text/master/test/fnt/Roboto-msdf.json;
                value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam"
        ></a-mixin>
        <a-mixin id="marker"
          geometry="primitive: box"
          material="color: red"
          scale="0.05 0.05 0.001"
        ></a-mixin>
      </a-assets>

      <a-entity position="0 0 -3.7">
        <a-text mixin="msdf-text" position="-3 -2 0" wrap-count="20"></a-text>
        <a-entity mixin="marker" position="-3 -2 -0.1"></a-entity>
        <a-text mixin="msdf-text" position="-3 0 0" wrap-count="30"></a-text>
        <a-entity mixin="marker" position="-3 0 -0.1"></a-entity>
        <a-text mixin="msdf-text" position="-3 1 0" wrap-count="40"></a-text>
        <a-entity mixin="marker" position="-3 1 -0.1"></a-entity>
        <a-text mixin="msdf-text" position="-3 1.5 0" wrap-count="50"></a-text>
        <a-entity mixin="marker" position="-3 1.5 -0.1"></a-entity>
        <a-text mixin="msdf-text" position="-3 2 0" wrap-count="60"></a-text>
        <a-entity mixin="marker" position="-3 2 -0.1"></a-entity>
        <a-text mixin="msdf-text" position="-3 2.5 0" wrap-count="70"></a-text>
        <a-entity mixin="marker" position="-3 2.5 -0.1"></a-entity>
        <a-text mixin="msdf-text" position="-3 3 0" wrap-count="80"></a-text>
        <a-entity mixin="marker" position="-3 3 -0.1"></a-entity>

        <a-text mixin="text" font="kelsonsans" position="3 -2 0" wrap-count="20"></a-text>
        <a-entity mixin="marker" position="3 -2 -0.1"></a-entity>
        <a-text mixin="text" font="kelsonsans" position="3 0 0" wrap-count="30"></a-text>
        <a-entity mixin="marker" position="3 0 -0.1"></a-entity>
        <a-text mixin="text" font="kelsonsans" position="3 1 0" wrap-count="40"></a-text>
        <a-entity mixin="marker" position="3 1 -0.1"></a-entity>
        <a-text mixin="text" font="kelsonsans" position="3 1.5 0" wrap-count="50"></a-text>
        <a-entity mixin="marker" position="3 1.5 -0.1"></a-entity>
        <a-text mixin="text" font="kelsonsans" position="3 2 0" wrap-count="60"></a-text>
        <a-entity mixin="marker" position="3 2 -0.1"></a-entity>
        <a-text mixin="text" font="kelsonsans" position="3 2.5 0" wrap-count="70"></a-text>
        <a-entity mixin="marker" position="3 2.5 -0.1"></a-entity>
        <a-text mixin="text" font="kelsonsans" position="3 3 0" wrap-count="80"></a-text>
        <a-entity mixin="marker" position="3 3 -0.1"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
